import React from 'react';

// https://docs.nativebase.io/Components.html#tabs-def-headref标签选项卡
import { Container, Tab, Tabs } from 'native-base';// 标签选项卡
import {
	ActivityIndicator,
	FlatList,
	Image,
	RefreshControl,
	Text,
	TouchableOpacity, View
} from 'react-native';
// import TabsControl from "react_tab.jsx"; //页签切换
// ScrollView ListView 滑动分页
// https://www.jianshu.com/p/4e7185fc9740
interface D {
	student_name: string;
	leave_content: string;
	start_time: number;
	finish_time: number;
	auditor_status: string;
	submission_times: string;
	start_times: string;
	finish_times: string;
	leave_num: string;
	index: number;
}
export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: (d: string) => string | number | D[]) {
	const arr = d('d') as D[];
	const arr_a = d('approved') as D[];
	// const t = d('t') as string;
	// const t1 = d('t1') as string;
	// const c = d('c') as number;

	const len = d('len') as number;
	if (arr && arr.length !== 0) {
		const totle = arr.length;
		return (
			<View style={{ height: '100%', backgroundColor: '#f4f4f4' }}>

				<View style={{ flexDirection: 'row' }}>
					<Container>
						{/* <Header hasTabs /> */}
						<Tabs onChangeTab={a('a007')}>
							<Tab heading="未审批">
								<View style={{ paddingBottom: 50 }}>
									<FlatList refreshControl={
										<RefreshControl
											onRefresh={a('a005', arr)}
											colors={['#ff0000']}
											enabled={true}
											progressBackgroundColor="#ffffff"
											refreshing={false}
										/>
									}
										onEndReached={a('a006')}
										onEndReachedThreshold={0.1} data={arr} renderItem={({ item }) => {
											return (
												<TouchableOpacity
													onPress={a('a004', [item.auditor_status, item.leave_num])}>
													<View>
														<View style={{ marginTop: 10, borderBottomColor: '#ddd', borderBottomWidth: 1, backgroundColor: '#fff', paddingLeft: 20, paddingTop: 10 }}>
															<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
																<Text style={s('text1')}>{item.student_name}</Text>
																<Text style={s('text2', 'pr10')}>{item.submission_times}</Text>
															</View>
															<View style={{ flexDirection: 'row' }}>
																<Text style={s('text3')}>开始时间：</Text>
																<Text style={s('text4')}>{item.start_times}</Text>
															</View>
															<View style={{ flexDirection: 'row' }}>
																<Text style={s('text3')}>结束时间：</Text>
																<Text style={s('text4')}>{item.finish_times}</Text>
															</View>
															<Text style={s('text4')}>{item.auditor_status === '0' ? '未审核' : item.auditor_status === '1' ? '已通过' : '未通过'}</Text>
														</View>

														{(() => {

															if (totle === item.index + 1 && totle > 9) {
																if (len > 0) {
																	return (
																		<View style={s('footer')}>
																			<ActivityIndicator />
																			<Text>正在加载更多数据...</Text>
																		</View>
																	);
																} else if (len === 0) {
																	return (
																		<View style={{ height: 30, alignItems: 'center', justifyContent: 'flex-start' }}>
																			<Text style={{ color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5 }}>
																				没有更多数据了
													</Text>
																		</View>
																	);
																} else {
																	return (
																		<View style={{ height: 30, alignItems: 'center', justifyContent: 'flex-start' }}>
																			<Text style={{ color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5 }}>
																				没有更多数据了
													</Text>
																		</View>
																	);
																}
															}
														})()}
													</View>
												</TouchableOpacity>
											);
										}}
									/></View>
							</Tab>
							<Tab heading="已审批">
								<View style={{ paddingBottom: 50 }}>
									<FlatList refreshControl={
										<RefreshControl
											onRefresh={a('a005', arr_a)}
											colors={['#ff0000']}
											enabled={true}
											progressBackgroundColor="#ffffff"
											refreshing={false}
										/>
									}
										onEndReached={a('a006')}
										onEndReachedThreshold={0.1} data={arr_a} renderItem={({ item }) => {
											const totle = arr_a.length;
											return (
												<TouchableOpacity
													onPress={a('a004', [item.auditor_status, item.leave_num])}>
													<View>
														<View style={{ marginTop: 10, borderBottomColor: '#ddd', borderBottomWidth: 1, backgroundColor: '#fff', paddingLeft: 20, paddingTop: 10 }}>
															<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
																<Text style={s('text1')}>{item.student_name}</Text>
																<Text style={s('text2', 'pr10')}>{item.submission_times}</Text>
															</View>
															<View style={{ flexDirection: 'row' }}>
																<Text style={s('text3')}>开始时间：</Text>
																<Text style={s('text4')}>{item.start_times}</Text>
															</View>
															<View style={{ flexDirection: 'row' }}>
																<Text style={s('text3')}>结束时间：</Text>
																<Text style={s('text4')}>{item.finish_times}</Text>
															</View>
															<Text style={s('text4')}>{item.auditor_status === '0' ? '未审核' : item.auditor_status === '1' ? '已通过' : '未通过'}</Text>
														</View>

														{(() => {

															if (totle === item.index + 1 && totle > 9) {
																if (len > 0) {
																	return (
																		<View style={s('footer')}>
																			<ActivityIndicator />
																			<Text>正在加载更多数据...</Text>
																		</View>
																	);
																} else if (len === 0) {
																	return (
																		<View style={{ height: 30, alignItems: 'center', justifyContent: 'flex-start' }}>
																			<Text style={{ color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5 }}>
																				没有更多数据了
													</Text>
																		</View>
																	);
																} else {
																	return (
																		<View style={{ height: 30, alignItems: 'center', justifyContent: 'flex-start' }}>
																			<Text style={{ color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5 }}>
																				没有更多数据了
													</Text>
																		</View>
																	);
																}
															}
														})()}
													</View>
												</TouchableOpacity>
											);
										}}
									/></View>
							</Tab>
						</Tabs>
					</Container>
				</View>

			</View >
		);
	} else if (!arr) {
		return (
			<View style={s('footer1')}>
				<ActivityIndicator
					animating={true}
					color='blue'
					size="large"
				/>
			</View>
		);
	} else {
		return (<View style={{ height: '100%' }}>
			<View style={{ flexDirection: 'row' }}>
				<Container>
					<Tabs onChangeTab={a('a007')}>
						<Tab heading="未审批">
							<View style={s('page')}>
								<Image source={require('../../imgs/wushuju.png')} style={{ width: 80, height: 80 }} />
								<Text style={{ fontSize: 20 }}>当前账号暂无数据</Text>
							</View>
						</Tab>
						<Tab heading="已审批">
							<View style={s('page')}>

								<Image source={require('../../imgs/wushuju.png')} style={{ width: 80, height: 80 }} />
								<Text style={{ fontSize: 20 }}>当前账号暂无数据</Text>
							</View>

						</Tab>
					</Tabs>
				</Container>

			</View>
		</View>);
	}

}


